import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Divider, Button, Icon } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../Less/BasicProfile.less';
import router from 'umi/router';
const { Description } = DescriptionList;


@connect(({ profile, users, loading }) => ({
  users,
  profile,
  loading: loading.effects['users/fetchUserInfo'],
}))
class BasicProfile extends Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'users/fetchUserInfo',
      payload: params.id,
    });
    dispatch({
      type: 'profile/fetchBasic',
      payload: params.id,
    });
  }

  render() {
    const { profile = {}, loading, users = {} } = this.props;
    const { userInfo = {} } = users;



    return (
      <PageHeaderWrapper title="基础详情页" loading={loading}>
        <Card bordered={false}>
          <div>
            <div className={styles.avatarHolder}>
              <img alt="" src={userInfo.avatar} />
              <div className={styles.name}>{userInfo.name}</div>
            </div>
          </div>
          <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
            <Description term="昵称">{userInfo.nickname}</Description>
            <Description term="绑定电话">{userInfo.phone}</Description>
            <Description term="性别">{userInfo.sex === 0 ? <span><Icon type="man" twoToneColor="#eb2f96" />男</span> : <span><Icon twoToneColor="#52c41a" type="woman" />女</span>}</Description>
            <Description term="城市">{userInfo.city}</Description>

            <Description term="地址">{userInfo.address}</Description>
            <Description term="状态">{userInfo.status === 0 ? <Badge status="processing" text='正常' /> : <Badge status="error" text="已冻结" />}


            </Description>
          </DescriptionList>
          <Divider />
          <DescriptionList size="large" title="vip信息" style={{ marginBottom: 32 }}>
            <Description term="会员类别">{userInfo.type === 0 ? '个人会员' : '企业会员'}</Description>
            <Description term="会员级别">{userInfo.vip_level}</Description>
            <Description term="会员到期时间">{userInfo.updated_at}</Description>
          </DescriptionList>

          <Divider />
          <DescriptionList size="large" title="相关操作" style={{ marginBottom: 32 }}>
            <Description term="开通会员"> <Button size='small' type="primary">开通会员</Button></Description>
            <Description term="开通店铺"><Button size='small' type="primary" onClick={()=>{router.push(`/shoplist/add-shop/${userInfo.user_id}`)}}>开通店铺</Button></Description>
            <Description term="续费会员"><Button size='small' type="primary">续费会员</Button></Description>
          </DescriptionList>


        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default BasicProfile;
